<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/BOM案例.css">
</head>
<body>
    <div class="box">
        <ul class="users">
            <!-- <li>张三</li> -->
        </ul>
        <button>开始点名</button>
    </div>
    <script>
        var users=document.querySelector('.users')
        var but=document.querySelector('button')
        var data=['张三','李四','王五','小明','李华','小红',
                  '张三','李四','王五','小明','李华','小红',
                  '张三','李四','王五','小明','李华','小红'
                ]
        users.innerHTML=data.map(function(item){
            return `<li>${item}</li>`
        }).join('')
        var lis=users.querySelectorAll('li')
        but.onclick=function(){
            but.disabled=true
            but.innerHTML='点名中...'
            but.style.background='#ccc'
            var timer= setInterval(function(){
                lis.forEach(function(li){
                     li.style.background="#" + Math.random().toString(16).slice(2,8)
            })
            },100)
            setTimeout(function(){
                clearInterval(timer)
                but.innerHTML='开始点名'
                but.style.background='purple'
                but.disabled=false
                lis.forEach(function(li){
                    return li.style.background='red'
                })
                var index=Math.floor(Math.random()*lis.length)
                lis[index].style.background='#'+Math.random().toString(16).substr(2,6)
            },2000)
        }
    </script>
</body>
</html>